<template>
  <div class="tinymce-box">
    <Editor :id="editorId" v-model="textContent" :init="initOptions" :disabled="false" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import tinymce from 'tinymce/tinymce'; //tinymce核心文件
import Editor from '@tinymce/tinymce-vue';
// tinymce.baseURL = 'tinymce';// 指定tinymce文件加载的位置
import 'tinymce/models/dom'; // 引入dom模块。从 Tinymce6，开始必须有此模块导入
import 'tinymce/themes/silver'; //默认主题
import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标


/* 引入编辑器插件
 * 位于 ./node_modules/tinymce/plugins 目录下，版本不同，插件会有所差异。根据自己版本来导入，若不存在的，不能导入，会报错。
 */
import 'tinymce/plugins/advlist'; //高级列表
import 'tinymce/plugins/anchor'; //锚点
import 'tinymce/plugins/autolink'; //自动链接
import 'tinymce/plugins/autoresize'; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import 'tinymce/plugins/autosave'; //自动存稿
import 'tinymce/plugins/charmap'; //特殊字符
import 'tinymce/plugins/code'; //编辑源码
import 'tinymce/plugins/codesample'; //代码示例
import 'tinymce/plugins/directionality'; //文字方向
import 'tinymce/plugins/emoticons'; //表情
import 'tinymce/plugins/fullscreen'; //全屏
import 'tinymce/plugins/help'; //帮助
import 'tinymce/plugins/image'; //插入编辑图片
import 'tinymce/plugins/importcss'; //引入css
import 'tinymce/plugins/insertdatetime'; //插入日期时间
import 'tinymce/plugins/link'; //超链接
import 'tinymce/plugins/lists'; //列表插件
import 'tinymce/plugins/media'; //插入编辑媒体
import 'tinymce/plugins/nonbreaking'; //插入不间断空格
import 'tinymce/plugins/pagebreak'; //插入分页符
import 'tinymce/plugins/preview'; //预览
import 'tinymce/plugins/quickbars'; //快速工具栏
import 'tinymce/plugins/save'; //保存
import 'tinymce/plugins/searchreplace'; //查找替换
import 'tinymce/plugins/table'; //表格
import 'tinymce/plugins/template'; //内容模板
import 'tinymce/plugins/visualblocks'; //显示元素范围
import 'tinymce/plugins/visualchars'; //显示不可见字符
import 'tinymce/plugins/wordcount'; //字数统计
const initOptions = {
  height: 600,
  language_url: './tinymce/langs/zh-Hans.js',
  language: 'zh-Hans',
  // 皮肤：这里引入的是public下的资源文件
  skin_url: './tinymce/skins/ui/oxide',
  content_css: './tinymce/skins/content/default/content.css',
  images_file_types: "jpg,jpeg,svg,webp",
  plugins: 'link lists image code table wordcount charmap emoticons  preview fullscreen',
  toolbar: 'undo redo code |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists table image media  | removeformat emoticons | fullscreen',
  branding: false,
  // 隐藏菜单栏
  menubar: false,
  // 是否显示底部状态栏
  statusbar: true,
  // convert_urls: false,
  // automatic_uploads: true,//每插入一个文件就上传
  // images_upload_url: 'postAcceptor.php',//上传服务器
  // images_reuse_filename: true,//上传后显示在页面中
  // 初始化完成
  init_instance_callback: (editor) => {
    console.log('初始化完成：', editor)
  },
  // 此处为自定义图片上传处理函数
  images_upload_handler: (blobInfo, progress) => {
    textContent.value += `<img style="width=400px;height:400px;" src="${"https://t.mwm.moe/pc/"}"/>`;
    //   formData.append("file", blobInfo.blob());
    //   axiosReq({
    //     url: "xxxxxxxxxxx",//需替换为真实路径测试
    //     data: formData,
    //     method: "post",
    //     bfLoading: true,
    //     isUploadFile: true,
    //   }).then((res) => {
    //     console.log(res);
    //   });
    return new Promise((resolve) => {
      resolve("")
    })
  },

};
const textContent = ref("");
defineProps<{ editorId: string }>();

onMounted(async () => {
  tinymce.init({}); //初始化
});
onUnmounted(() => {
  tinymce.remove(); //销毁
});
defineExpose({
  textContent,
})
</script>

<style scoped>
.tinymce-box {
  width: 100%;
}
</style>
